import React, { useState } from 'react';
import { View, Text, Input, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { addFirstPlanApi } from '@/api/handleUserAccount.js';
import './Welcome.scss';

const Welcome = () => {
  const [welcomeIndex, setWelcomeIndex] = useState(1);
  const [currentPlan, setCurrentPlan] = useState('');
  const [featureWish, setFeatureWish] = useState('');

  const next = () => {
    if (welcomeIndex >= 4) {
      // 跳转到正式页面
      Taro.redirectTo({ url: '/views/home/RoleSelect' });
      return;
    }
    setWelcomeIndex(welcomeIndex + 1);
  };

  const finishConfirm = async () => {
    if (!currentPlan || !featureWish) {
      Taro.showToast({ title: '请填写完整信息', icon: 'none' });
      return;
    }
    
    try {
      const result = await addFirstPlanApi({ currentPlan, featureWish });
      if (result) {
        next();
      }
    } catch (error) {
      console.error('保存计划失败:', error);
      Taro.showToast({ title: '保存失败，请重试', icon: 'none' });
    }
  };

  return (
    <View className="welcome-container">
      {welcomeIndex === 1 && (
        <View className="welcome1" onClick={next}>
          欢迎来到
          <br />一日之计小木屋
          <br />让我们开始计划之旅吧！
        </View>
      )}

      {welcomeIndex === 2 && (
        <View className="welcome2" onClick={next}>
          <View className="tips">
            在正式开始前，
            <br />请写下你来到这里的第一个计划，
            <br />以及期望达到的结果；
            <br />它或许会成为你未来某一天的一个情感共鸣，
            <br />又或者是继续前进的动力。
          </View>
          <View className="attention">要认真填写噢！</View>
        </View>
      )}

      {welcomeIndex === 3 && (
        <View className="currentPlan">
          <View className="form">
            <View className="form-item">
              <Text className="label">当前计划</Text>
              <Input
                className="input"
                placeholder="请填写信息"
                value={currentPlan}
                onInput={(e) => setCurrentPlan(e.target.value)}
              />
            </View>
            <View className="form-item">
              <Text className="label">未来愿景</Text>
              <Input
                className="input"
                type="text"
                placeholder="请填写信息"
                value={featureWish}
                onInput={(e) => setFeatureWish(e.target.value)}
              />
            </View>
          </View>
          <View className="confirm" onClick={finishConfirm}>
            确认
          </View>
        </View>
      )}

      {welcomeIndex === 4 && (
        <View className="planSaveTip" onClick={next}>
          好的，
          <br />你的计划在小木屋中已经查收，
          <br />我们会为你妥善保管！
          <br />在未来的某个时刻，
          <br />你或者又会以其他形式与它见面。
          <br />满怀期待吧！
        </View>
      )}
    </View>
  );
};

export default Welcome;